var MaterialSetting = function () {
  var SearchForm = function () {
    var template = /* html */ `
      <div class="search-form">
        <el-form inline label-width="auto" size="medium">
          <el-form-item label="部门">
            <el-select clearable filterable v-model="search.materialDeptId" style="width:200px">
              <el-option v-for="dept in deptList" :key="dept.materialDeptId" :value="dept.materialDeptId" :label="dept.materialDeptName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="search.materialProviderName" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="search.materialName" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="物料类型">
            <el-input v-model="search.materialType" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="规格">
            <el-input v-model="search.materialModel" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="色号">
            <el-input v-model="search.materialColor" style="width:200px"></el-input>
          </el-form-item>
        </el-form>
      </div>
    `;

    return {
      props: {
        search: {
          type: Object,
          required: true
        },
        deptList: {
          type: Array,
          default: function () {
            return [];
          }
        }
      },

      data: function () {
        return {};
      },

      template: template
    };
  }();


  var template = /* html */ `
    <div class="material-setting" v-loading.fullscreen.lock="loading">
      <search-btn-view append-to-body btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="ensure">确定</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :dept-list="deptList"></search-form>
        </div>
      </search-btn-view>
      <div class="material-setting-table-div">
        <el-table fit stripe border highlight-current-row :data="materialList" style="width: 100%" height="parent"
          @current-change="currentChange">
          <el-table-column label="供应商" prop="providerName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="物料名称" prop="materialName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="物料类型" prop="materialType" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="规格" prop="model" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="色号" prop="color" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="描述" prop="colorDescription" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="材质" prop="material" min-width="100px" header-align="center"></el-table-column>
          <el-table-column label="单价" prop="unitPrice" min-width="100px" align="center"></el-table-column>
          <el-table-column label="单位" prop="unit" min-width="80px" align="center"></el-table-column>
          <el-table-column label="库存数" prop="materialCount" min-width="100px" align="center"></el-table-column>
          <el-table-column label="可用库存数" prop="useableMaterialCount" min-width="100px" align="center"></el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  `;

  return {
    props: {
      materialData: {
        type: Object,
        required: true
      },
      dropdownOption: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },

    data: function () {
      var search = {
        materialDeptId: '',
        materialName: '',
        materialType: '',
        materialColor: '',
        materialProviderName: '',
        materialModel: ''
      };
      return {
        loading: false,
        deptList: [],
        materialList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        selectMaterial: null,
        isInit: true
      };
    },

    created: function () {
      this.loading = true;
      this.isInit = true;
      var self = this;
      Promise.all([
        this.setDeptList(),
        this.setMaterialList(true, false)
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setDeptList: function () {
        var dropdownOption = this.dropdownOption;
        var deptList = dropdownOption.deptList;
        if (deptList !== undefined) {
          this.deptList = deptList;
          return Promise.resolve(deptList);
        }

        var self = this;
        return ajaxRequest('createOrder/getCompanyMaterialDeptInfo').then(function (deptList) {
          self.deptList = deptList;
          dropdownOption.deptList = deptList;
          return deptList;
        });
      },

      setMaterialList: function (isSearch, hasLoading) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        if (hasLoading === undefined) {
          hasLoading = true;
        }

        var postData = {};
        if (this.isInit) {
          var materialData = this.materialData;
          var materialTypeData = materialData.materialType;
          var materialType = materialTypeData.materialType;
          if (materialType.indexOf('板材') === 0) {
            materialType = '胶板';
          } else {
            materialType = materialType.substring(0, 2);
          }
          postData = {
            material_factory: materialTypeData.defaultWarehouse,
            materialNamePrefix: materialType
          };
        }

        var search = this.search;
        var fields = ['materialDeptId', 'materialProviderName', 'materialName', 'materialType', 'materialModel', 'materialColor'];
        SysUtil.setPostData(postData, search, fields);

        var pagination = this.pagination;
        postData.page = pagination.currentPage;
        postData.rows = pagination.pageSize;

        if (hasLoading) {
          this.loading = true;
        }
        var self = this;
        return ajaxRequest('createOrder/getFactoryTabChildList', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.rows;
          self.materialList = materialList;
          self.pagination.totalCount = res.total;
          if (hasLoading) {
            self.loading = false;
          }
          return materialList;
        }).catch(function () {
          if (hasLoading) {
            self.loading = false;
          }
          return [];
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        if (this.isInit) {
          this.isInit = false;
        }
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      currentChange: function (material) {
        this.selectMaterial = material;
      },

      // createSuccess:function (materialObj) {
      //   this.openDialog = false;
      //   this.materialData.materialObj = materialObj;
      //   this.$emit('setting-success', this.materialData)
      // },

      ensure: function () {
        var material = this.selectMaterial;
        if (material === null) {
          this.$alert('请选择要设置哪个物料', '信息');
          return;
        }

        var materialObj = {
          materialCode: material.materialCode,
          materialName: material.materialName,
          materialProviderName: material.providerName,
          materialModel: material.model,
          materialColor: material.color,
          materialColorDescription: material.colorDescription
        };
        this.materialData.materialObj = materialObj;
        this.$emit('setting-success', this.materialData)
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    },

    template: template
  };
}();
